<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>点泡泡</title>
    <style>
        #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }
    </style>
</head>
<body>
<div id="canvas-warp">
    <canvas id="canvas">
        你的浏览器居然不支持Canvas？！赶快换一个吧！！
    </canvas>
</div>

<script>
    var balls = [];
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");

    window.onload = function(){
        canvas.width = 800;
        canvas.height = 600;

        for(var i=0; i<50; i++){
            var aBall = {
                x: Math.random() * canvas.width,
                y: Math.random() * canvas.height,
                r: Math.random() * 50 + 20
            };
            balls[i] = aBall;
        }

        draw();
        canvas.addEventListener("mousemove",detect);
    };

    function draw(){
        for(var i=0; i<balls.length; i++){
            context.beginPath();
            context.arc(balls[i].x, balls[i].y, balls[i].r, 0, Math.PI *2);
            context.globalAlpha = 0.5;

            var R = Math.floor(Math.random() * 255);
            var G = Math.floor(Math.random() * 255);
            var B = Math.floor(Math.random() * 255);

            context.fillStyle = "rgb(" + R + "," + G + "," + B + ")";
            context.fill();

        }
    }

    function detect(){
        var x = event.clientX - canvas.getBoundingClientRect().left;
        var y = event.clientY - canvas.getBoundingClientRect().top;

        for(var i=0; i<balls.length; i++){
            context.beginPath();
            context.arc(balls[i].x, balls[i].y, balls[i].r, 0, Math.PI * 2);

            if(context.isPointInPath(x,y)){
                context.fillStyle = "rgba(255,255,255,0.1)";
                context.fill();
            }
        }
    }

</script>
</body>
</html>